<template>
  <div class="app-list">

    <table class="mt-10 table-bg table-border table-hover table table-bordered">
      <tr>
        <td class="bold text-r pd-rt-10">登录账号：</td>
        <td>liuhefei</td>
        <td class="bold text-r pd-rt-10">所属部门：</td>
        <td>IT科技部</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">手机号码：</td>
        <td>1855555588</td>
        <td class="bold text-r pd-rt-10">个性签名：</td>
        <td>做自己的事，让别人看笑话吧。</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">性别：</td>
        <td>男</td>
        <td class="bold text-r pd-rt-10">当前职务：</td>
        <td>软件开发工程师</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">生日：</td>
        <td>1984年6月22日</td>
        <td class="bold text-r pd-rt-10">邮箱地址：</td>
        <td>Hello@wetech.com</td>
      </tr>
      <tr>
        <td class="bold text-r pd-rt-10">城市：</td>
        <td>广东省深圳市</td>
        <td class="bold text-r pd-rt-10">分机座机：</td>
        <td>0755-88888888</td>
      </tr>
    </table>

  </div>
</template>

<script>
  import AList from 'ant-design-vue/es/list'
  import AListItem from 'ant-design-vue/es/list/Item'

  export default {
    name: "Article",
    components: {
      AList,
      AListItem
    }
  }
</script>

<style lang="scss" scoped>
  .app-list{
    table{
      tr{
        td{
          padding:10px 28px 10px 78px;
          &.bold{
            font-weight: 500;
            color:#000000;
          }
        }
      }
    }
  }
</style>